為訊息增加 Call to Action

Flex Message action 常見用途

而 Flex Message 往往搭配 CTA (Call to Action)，能有效提高訂單轉換率或是讓使用者與軟體有更多的互動，以小生物評價機器人來說，評價的投稿往往是維持整個系統運作的重要功能，畢竟當評價越多的時候更能維持軟體優勢。將投稿評價的按鈕放置在每一則評價上則是一種很好的 CTA 方式:

可以注意到最下方有三個按鈕。

定義需求

而在 Day10 的時候，主要是以評價為主體，今天我們為 Flex Message 多加上 檢舉連結、投稿連結、輸出課名的三種按鈕功能:

1. 檢舉連結: 雖然評價乃可受公評之事，不過往往會遇到過於激烈，甚至涉及人身攻擊的言論，在面對大量新上架評價內容時，除了仰賴後台工作人員審核，使用者的回饋也可以幫助篩選出不適當的評價。
2. 投稿連結: 此為促進平台可以獲得更多評價投稿的方式之一，透過每一則評價都有露出提示投稿的按鈕，也能省下不少宣傳貼文的時間成本。
3. 輸出課名: 發現不錯的評價當然要把好課記下來，放到選課清單當中，這個功能能產生純文字供使用者複製課名與老師名。

編寫邏輯

1. 在原有 Flex Message JSON 再加上網址 URI Action Button，完整 JSON 連結，請搭配 LINE 模擬器服用:

   // hulolo > chatbot > reply_evaluation.json
   {
     "type": "box",
     "layout": "horizontal",
     "contents": [
       {
         "type": "button",
         "action": {
           "type": "uri",
           "label": "投稿評價",
           "uri": "http://linecorp.com/"
         },
         "color": "#ffffff"
       }
     ],
     "position": "relative",
     "margin": "lg",
     "justifyContent": "center",
     "alignItems": "center",
     "cornerRadius": "md",
     "height": "28px",
     "backgroundColor": "#E68750",
     "offsetEnd": "6px"
   }
   

   可以發現這裡用了 box 包覆了 contents，而內有 "type": "button" 呈現，帶有 action 動作，指的就是按下去要發生何事，這邊則是產生連結: "type": "uri"。投稿連結的方式與此步驟相同，就不贅述。

2. 輸出課名則是以 訊息 Message Action Button 呈現，目的是產生使用者可複製的文字:

   // hulolo > chatbot > reply_evaluation.json
   {
       "type": "box",
       "layout": "horizontal",
       "contents": [
         {
           "type": "button",
           "action": {
             "type": "message",
             "label": "輸出課名",
             "text": "123"
           },
           "color": "#FFFFFF"
         }
       ],
       "position": "relative",
       "margin": "lg",
       "justifyContent": "center",
       "alignItems": "center",
       "cornerRadius": "md",
       "backgroundColor": "#30D5C8",
       "height": "28px",
       "offsetEnd": "lg"
   }
   

   可以發現這裡用了 box 包覆了 contents，而內有 "type": "message" 呈現，帶有 action 動作，指的就是按下去要發生何事，這邊則是產生文字: "text": "123"。

3. 可以發現上面的 JSON 內容是假資料，於是要在 views.py 中進行代換，下文為 對三個按鈕的重新定義內容，前兩者是檢舉連結、投稿連結，第三個為輸出課名，這邊可以使用先前介紹的 JSON 線上編輯器，能夠幫助我們迅速定位到要改變 value 所在的 key:
   

   點擊要改變的值，上方就會顯示位置。

   # hulolo > chatbot > views.py
   flex['footer']['contents'][1]['contents'][0]['contents'][0]['action']['uri'] = "https://google.com"
   
   flex['footer']['contents'][1]['contents'][1]['contents'][0]['action']['uri'] = "https://google.com"
   
   flex['footer']['contents'][1]['contents'][2]['contents'][0]['action']['text'] = f"{course_info['teacher_name']}-{course_info['course_name']}"
   

再往前一點點

• 透過聊天機器人的所發出的 Flex Message ，如果因為各種情境需要讓使用者分享或保存，在使用者端僅有長按截圖，不具有分享、複製內文的功能，雖然具有保護的作用，但若要讓使用者複製文字用途 (如:優惠券代碼，或是提供文字轉傳)，就會有所不便。
• 後來 LINE 於 2024.02.05 發布 Clipboard 提供使用者複製文字，請注意使用的 line-bot-sdk-python 套件版本是否大於 3.8.1。

覆盤

在這篇文章中，我們學會了:

• Call to Action 對行銷的幫助與設計目的
• URI action 的調用
• Message action 的調用
• JSON Editor Online 的 Key 定位功能
• Day 19 原始碼